<template>
  <div class="card-user" ref="userRef">TotalUser</div>
</template>

<script lang="ts">
export default {
  name: "TotalUser",
};
</script>

<script lang="ts" setup>

import { right } from "@popperjs/core";
import * as echarts from "echarts"
import { ref,onMounted } from "vue";

const userRef=ref()

onMounted(()=>{
  const myEcharts=echarts.init(userRef.value)
  const option={
    xAxis: {
    min:0,
    max:100,
    show:false,
    },
    yAxis:{
   show:false,
  //  type:'category',

   data: [ "一月", ],
    },
    series:{
      type:"bar",
      data: [25],
     barWidth:10,
     showBackground:true,
      boundaryGap: false,
      color:["yellowgreen"],
      label:{
        show:true,
        position:"right",
        formatter :"|"
      }
    },
    grid:{
      top:0,
      bottom:0,
      left:0,
      right:0
    },
   
 tooltip:{}
    
  }
  myEcharts.setOption(option)
})
 
</script>

<style scoped>
.card-user{
  height: 100%;
}

</style>